<template>
  <el-config-provider namespace="ep">
    <BaseHeader />

    <div class="main-container flex">
      <div w="full">
        <RouterView />

        <el-dialog
            v-model="authModal.visible"
            title="访问受限"
            width="30%"
            center
            :close-on-click-modal="false"
            :show-close="false"
        >
          <div style="text-align: center">
            <p>该页面需要登录后才能访问</p>
            <p>
              将在 {{ authModal.countdown }} 秒后自动跳转到登录页面...
            </p>
          </div>
          <template #footer>
            <div style="text-align: center">
              <el-button
                  @click="handleJump"
              >
                点击立即跳转
              </el-button>
            </div>
          </template>
        </el-dialog>

      </div>
    </div>
  </el-config-provider>
</template>

<script setup lang="ts">
import { useAuthModalStore } from '~/stores/authModal'

const authModal = useAuthModalStore()

const handleJump = () => {
  authModal.navigateToLogin()
}
</script>

<style>
#app {
  text-align: center;
  color: var(--ep-text-color-primary);
}

/* 固定头部样式 */
.el-menu-demo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000; /* 确保头部在最上层 */
  width: 100%;
}

.main-container {
  margin-top: 80px; /* 与头部高度一致 */
  height: calc(100vh - 80px);
}
</style>